<template>
<view class="container">
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			id="0"
			:data-current="0"
			:class="{ 'active': active == 'homework' }"
			@click="onTabClick('homework')">
			<text class="tab-view-item--text">待完成作业</text>
		</view>
		<view class="tab-view-item"
			id="1"
			:data-current="1"
			:class="{ 'active': active == 'message' }"
			@click="onTabClick('message')">
			<text class="tab-view-item--text">通知</text>
		</view>
		<view class="tab-view-item"
			id="2"
			:data-current="2"
			:class="{ 'active': active == 'sign' }"
			@click="onTabClick('sign')">
			<text class="tab-view-item--text">打卡</text>
		</view>
		<view class="tab-view-item"
			id="3"
			:data-current="3"
			:class="{ 'active': active == 'live' }"
			@click="onTabClick('live')">
			<text class="tab-view-item--text">直播课</text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 待完成作业 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="task-item-v sec-top"
					v-for="item in homeworkList"
					:key="item.id"
					@click="onItemClick('task', item)">
					<view class="task-item-header">
						<view class="task-item-info">
							<view class="task-item-type">
								<text class="iconfont icon-book large"></text>
							</view>
							<view class="task-item-describe sec-left">
								<view class="task-item-date">
									<text>{{ item.title }}</text>
								</view>
								<view class="task-item-author">
									<text>王老师</text>
									<text class="sec-left">发布于</text>
									<text>{{ formatDate(item.tasks[0].createdTime) }}</text>
								</view>
							</view>
						</view>
						<view :class="['task-item-status', item.tasks[0].status]">
							<text>{{ item.tasks[0].status == 'published' ? '已提交' : '未提交' }}</text>
						</view>
					</view>
					<view class="task-item-body">
						<view class="task-item-content line-clamp-2">
							<text>{{ item.tasks[0].title }}</text>
						</view>
						<view class="task-item-deadline">
							{{ formatDate(item.tasks[0].endTime) }}截止
						</view>
					</view>
					<view class="task-item-footer">
						<text>{{ item.tasks[0].status == 'published' ? '重新提交' : '去提交' }}</text>
						<uni-icons type="arrowright" size="16" color="#007AFF" />
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 通知 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="message-item sec-top"
					v-for="item in notificationList"
					:key="item.id"
					@click="onItemClick('message', item)">
					<view class="message-item-header">
						<text class="iconfont icon-book middle"></text>
						<text class="sec-left">通知</text>
					</view>
					<view class="message-item-body line-clamp-2">
						<text>{{ item.content }}</text>
					</view>
					<view class="message-item-footer">
						<text>查看详情</text>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 打卡 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="task-item-v sec-top"
					@click="onItemClick('sign', { id: 1 })">
					<view class="task-item-header">
						<view class="task-item-info">
							<view class="task-item-type">
								<text class="iconfont icon-book large"></text>
							</view>
							<view class="task-item-describe sec-left">
								<view class="task-item-date">
									<text>4月26日</text>
									<text class="sec-left">历史</text>
								</view>
								<view class="task-item-author">
									<text>王老师</text>
									<text class="sec-left">发布于</text>
									<text>周日 12:06</text>
								</view>
							</view>
						</view>
						<!-- #ifdef APP-PLUS -->
						<view class="task-item-type"
							@click.stop="onScan({ id: 1 })">
							<text class="iconfont icon-scan large"></text>
						</view>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS -->
						<view class="task-item-right">
							<text class="iconfont icon-date"></text>
							<text class="sec-left">3天2时35分</text>
						</view>
						<!-- #endif -->
					</view>
					<view class="task-item-body">
						<view class="task-item-content line-clamp-2">
							<text>abcdefg字母歌我爱1111abcdefg字母歌我爱1111abcdefg字母歌我爱1111abcdefg字母歌我爱1111</text>
						</view>
					</view>
					<view class="task-item-footer">
						<text>查看详情</text>
						<uni-icons type="arrowright" size="16" color="#007AFF" />
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 直播课 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="subject-item sec-top"
					v-for="item in liveList"
					:key="item.id"
					@click="onItemClick('subject', item)">
					<view class="subject-item-header">
						<view class="subject-item-left">{{ formatDate(item.updatedTime) }}</view>
						<view class="subject-item-right">
							<text class="iconfont icon-date"></text>
							<text class="sec-left">--</text>
						</view>
					</view>
					<view class="subject-item-body">
						<image class="subject-item-cover"
							src="/static/banner.png"
							mode="aspectFill" />
						<view class="subject-item-info">
							<view class="subject-item-summary sec-left">
								<view class="subject-title line-clamp-1">abcdefg字母歌我爱1111abcdefg字母歌我爱1111abcdefg字母歌我爱1111</view>
								<view class="subject-subtitle line-clamp-2">abcdefg字母歌我爱1111abcdefg字母歌我爱1111abcdefg字母歌我爱1111abcdefg字母歌我爱1111</view>
							</view>
							<view class="subject-item-author sec-left">
								<text>--</text>
								<text class="sec-left">讲师</text>
							</view>
						</view>
					</view>
					<view class="sec-top"></view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
	</swiper>
</view>
</template>

<script>
import { getMyTask, getNotifications } from '@/api/index.js';
export default {
	data() {
		return {
			active: 'homework',
			tabIndex: 0,
			type: null,
			category: null,
			from: null,
			tabs: ['homework', 'message', 'sign', 'live'],
			homeworkList: [],
			notificationList: [],
			liveList: []
		}
	},
	onLoad(data) {
		this.type = data.type || 'task';
		this.category = data.category || 'homework';
		this.from = data.from || 'index';
		this.onTabClick(this.category);
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		getMyTask('homework').then(res => {
			this.homeworkList = res.list || [];
		});
		getNotifications().then(res => {
			this.notificationList = res.list || [];
		});
		getMyTask('live').then(res => {
			this.liveList = res.list || [];
		});
	},
	methods: {
		onTabClick(type) {
			this.active = type;
			switch(type) {
				case 'message':
					this.tabIndex = 1;
					break;
				case 'sign':
					this.tabIndex = 2;
					break;
				case 'live':
					this.tabIndex = 3;
					break;
				default:
					this.tabIndex = 0;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		},
		onItemClick(type, item) {
			uni.navigateTo({
				url: `/pages/${ type }/detail?id=${ item.id }&from=task`
			})
		},
		onScan(item) {
			// #ifdef APP-PLUS
			uni.scanCode({
				success(res) {
					console.log('scan success: ', res)
				},
				complete() {
					console.log('scan complete')
				}
			});
			// #endif
		},
		formatDate(timestamp) {
			if (!timestamp) return '--';
			let date = null;
			if (timestamp.length == 10) {
				date = new Date(parseInt(timestamp) * 1000);
			}
			else if (timestamp.length == 13) {
				date = new Date(parseInt(timestamp));
			}
			date = new Date(date);
			let YY = date.getFullYear() + '-';
			let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
			return YY + MM + DD +" "+hh + mm + ss;
		}
	}
}
</script>
